<template>
    <el-dialog
      :title="selectData.id ? '编辑用户' : '新增用户'"
      :visible.sync="status"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="700px"
      @close="$emit('close')"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" width="400px" auto-complete="off"> </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!selectData.id">
          <el-input v-model="ruleForm.password" width="400px" auto-complete="off"> </el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar"  v-if="selectData.id">
          <el-input v-model="ruleForm.avatar" width="400px" auto-complete="off"> </el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" width="400px" auto-complete="off"> </el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createdAt" v-if="selectData.id">
          <div>{{ ruleForm.createdAt }}</div>
        </el-form-item>
        <el-form-item label="更新时间" prop="updatedAt" v-if="selectData.id">
          <div>{{ ruleForm.updatedAt }}</div>
        </el-form-item>
        <el-form-item label="头像" prop="password" v-if="!selectData.id">
          <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            name="file"
            :limit="1"
            :data="{ bucket }"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="successPic"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <img width="100%" :src="ruleForm.icon" alt="" style="display: none" />
          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="ruleForm.icon" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close(false)">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  import Utils from '@/settings.js'
  import userApi from '@/api/user'
  export default {
    name: 'aa2',
    props: {
      showAddUpdate: Boolean,
      selectData: Object
    },
    data() {
      return {
        status: this.showAddUpdate,
        uploadUrl: `${process.env.VUE_APP_BASE_API}/api/upload`,
        bucket:'user',
        dialogVisible:false,
        rules: {
          username: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          // avatar: [{ required: true, message: "请输入头像", trigger: "blur" }],
          email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
          content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
        },
        ruleForm: {
          username: '',
          avatar: 'qweqwe',
          password:'',
          email: '',
          content: ''
        }
      }
    },
    created() {
      this.ruleForm = this.selectData
      if (this.selectData.pid > 0) {
        this.ruleForm = {
          ...this.selectData,
          username: Utils.boss,
          avatar: Utils.avatar,
          email: Utils.email
        }
      } else {
        this.ruleForm = this.selectData
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList,'6666666666')
        this.ruleForm.icon = ''
      },
      successPic(response) {
        console.log(response.data.url)
        this.ruleForm.icon = response.data.url
      },
      handlePictureCardPreview(file) {
        this.ruleForm.icon = file.url
        this.dialogVisible = true
      },
      close(val = false) {
        this.$emit('close', val)
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.submit()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      submit() {
        if (this.ruleForm.id) {
          this.update()
        } else {
          this.add()
        }
      },
      async add() {
        let params = {
          ...this.ruleForm,
        }
        console.log(params)
        await userApi.create(params)
        this.$message.success('添加成功')
        this.close(true)
      },
      async update() {
        let params = {
          ...this.ruleForm
        }
        await this.$api.message.updateMessage(this.ruleForm.id, params)
        this.$message.success('更新成功')
        this.close(true)
      }
    }
  }
  </script>
  
  <style></style>